/**
 * @description js 拖拽等效果
 * @author Evan Lin (evan_origin@163.com)
 * @date 2020-04-09
 */

/**
 * @description 获取元素的方法
 * @author LinW (evan_origin@163.com)
 * @date 2020-04-09 21:33
 * @param clsName 元素的class名称
 * @param parent 它相对父元素的ID名称
 * @returns {number}
 */
function getByClass(clsName, parent) {
    var oParent = parent ? document.getElementById(parent) : document,
        eles = [],
        elements = oParent.getElementsByTagName('*');
    for(var i = 0, l = elements.length; i < l; i++) {
        if (elements[i].className == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}

window.onload = drag;

/**
 * @description 拖拽函数 (用户在标题区域按下就可以在页面中移动面板，释放鼠标时停止移动)
 * @author LinW (evan_origin@163.com)
 * @date 2020-04-09 21:39
 * @param {Function}
 * @returns {number}
 */
function drag () {
    // 标题区域
    var oTitle = getByClass('login_logo_webqq', 'loginPanel')[0];

    // 拖拽效果
    oTitle.onmousedown = fnDown;

    // 关闭效果
    var oClose = document.getElementById('ui_boxyClose');
    oClose.onclick = function () {
        document.getElementById('loginPanel').style.display = 'none'
    }

    // 切换状态
    var loginState = document.getElementById('loginState'),
        stateList = document.getElementById('loginStatePanel'),
        lis = stateList.getElementsByTagName('li'),
        stateText = document.getElementById('login2qq_state_txt'),
        loginStateShow = document.getElementById('loginStateShow');

    loginState.onclick = function(e) {
        e = e || window.e
        if (e.stopPropagation) {
            e.stopPropagation()
        } else {
            e.cancelBubble = true
        }
        stateList.style.display = 'block'

    }
    // 鼠标滑过，离开和点击状态列表时
    for(var i = 0, l = lis.length; i < l; i++) {
        // 鼠标滑过
        lis[i].onmouseover = function() {
            this.style.background = '#567';
        }
        // 鼠标离开
        lis[i].onmouseout = function() {
            this.style.background = '#fff';
        }
        // 鼠标点击
        lis[i].onclick = function(e) {
            // 事件冒泡浏览器兼容写法
            e = e || window.event;
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true
            }
            var id = this.id
            // console.log(event.target) // 或者用这个方法获取
            stateList.style.display = 'none'

            stateText.innerHTML = getByClass('stateSelect_text', id)[0].innerHTML;
            loginStateShow.className = ''
            loginStateShow.className = 'login-state-show ' + id;

        }
        document.onclick = function () {
            stateList.style.display = 'none'
        }
    }
}

/**
 * @description 鼠标按下执行
 * @author LinW (evan_origin@163.com)
 * @date 2020-04-09 21:43
 * @param {Function}
 * @returns {number}
 */
function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel'),
        // 光标按下时，光标和面板之间的距离
        disX = event.clientX - oDrag.offsetLeft,
        disY = event.clientY - oDrag.offsetTop;
    // 移动
    document.onmousemove = function (event) {
        event = event || window.event;
        // 鼠标按下的时候去求光标的距离
        fnMove(event, disX,disY);
    }
    // 鼠标释放 移除事件DOM 0级事件绑定
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null
    }
}

/**
 * @description 鼠标移动函数
 * @author LinW (evan_origin@163.com)
 * @date 2020-04-09 22:11
 * @param {Function}
 * @returns {number}
 */
function fnMove(e, posX, posY) {
    var oDrag = document.getElementById('loginPanel'),
        l = e.clientX - posX,
        t = e.clientY - posY,
        // 求出可拖动的最大范围
        winW =  document.documentElement.clientWidth || document.body.clientWidth, // 视窗宽度
        winH = document.documentElement.clientHeight || document.body.clientHeight, // 视窗高度
        maxW = winW - oDrag.offsetWidth - 10, // 可滚动的最大宽度 // -10 是因为 关闭按钮定位引起的
        maxH = winH - oDrag.offsetHeight; // 可滚动的最大高度
    // 拖动超出左侧 就等于 0 ，超出右侧最大值就等于可以滚动的最大宽度
    if (l < 0) {
        l = 0;
    } else if (l > maxW) {
        l = maxW;
    }
    // 拖动超出右侧 就等于 0 ，超出右侧最大值就等于可以滚动的最大宽度
    if (t < 0) {
        t = 10; // 10 是因为 关闭按钮定位引起的
    } else if (t > maxH) {
        t = maxH;
    }
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';
}
